<!--
 * @Description:
 * @Author: ZachGmy
 * @Date: 2020-09-03 09:57:40
 * @LastEditors: sick cell 11238056+zhaoziyin@user.noreply.gitee.com
 * @LastEditTime: 2022-06-28 20:35:42
-->
<template>
  <div class="EpidmicDynamic">
    <!-- 疫情动态数据展示 -->
    <div class="EpidmicDyn">
      <!-- 当前时间 -->
      <div class="nowTime">截止到{{ new Date() | fmtDate }}</div>
      <!-- 第一个部分 -->
      <div class="first">
        <!-- 新增确诊盒子 -->
        <div class="box">
          <!-- 数量 -->
          <div class="num">{{ ncovData[0].desc.currentConfirmedIncr }}</div>
          <!-- 标题 -->
          <div class="title">新增确诊</div>
        </div>
        <!-- 新增治愈盒子 -->
        <div class="box">
          <!-- 数量 -->
          <div class="num">{{ ncovData[0].desc.curedIncr }}</div>
          <!-- 标题 -->
          <div class="title">新增治愈</div>
        </div>
        <!-- 新增死亡盒子 -->
        <div class="box">
          <!-- 数量 -->
          <div class="num">{{ ncovData[0].desc.deadIncr }}</div>
          <!-- 标题 -->
          <div class="title">新增死亡</div>
        </div>
      </div>
      <div class="nowTime">截止到{{ new Date() | fmtDate }}</div>
      <!-- 第二个部分 -->
      <div class="second">
        <!-- 现存确诊盒子 -->
        <div class="box">
          <!-- 数量 -->
          <div class="num" style="color:blueviolet">{{ ncovData[0].desc.currentConfirmedCount }}</div>
          <!-- 标题 -->
          <div class="title">现存确诊</div>
        </div>
        <!-- 现有无症状盒子 -->
        <div class="box">
          <!-- 数量 -->
          <div class="num" style="color:cornflowerblue">{{ ncovData[0].desc.seriousCount }}</div>
          <!-- 标题 -->
          <div class="title">现有无症状</div>
        </div>
        <!-- 累计境外输入盒子 -->
        <div class="box">
          <!-- 数量 -->
          <div class="num" style="color:salmon">{{ ncovData[0].desc.suspectedCount }}</div>
          <!-- 标题 -->
          <div class="title">累计境外输入</div>
        </div>
        <!-- 累计确诊盒子 -->
        <div class="box">
          <!-- 数量 -->
          <div class="num" style="color:blueviolet">{{ ncovData[0].desc.confirmedCount }}</div>
          <!-- 标题 -->
          <div class="title">累计确诊</div>
        </div>
        <!-- 累计治愈盒子 -->
        <div class="box">
          <!-- 数量 -->
          <div class="num" style="color:cornflowerblue">{{ ncovData[0].desc.curedCount }}</div>
          <!-- 标题 -->
          <div class="title">累计治愈</div>
        </div>
        <!-- 累计死亡盒子 -->
        <div class="box">
          <!-- 数量 -->
          <div class="num" style="color:salmon">{{ ncovData[0].desc.deadCount }}</div>
          <!-- 标题 -->
          <div class="title">累计死亡</div>
        </div>
      </div>
    </div>
    <!-- 国内疫情数据 -->
    <div class="inLandCovid">
      <!-- 标题 -->
      <div class="nowTime">国内病例</div>
      <!-- 表格展示区域 -->
      <div class="tableContent">
        <el-table :data="inLandCovidData" border style="width: 100%" :header-cell-style="cellstyle">
          <!-- prop ='date' 根据返回的数据 将要显示的字段 -->
          <!-- label 每一列的名称 -->
          <el-table-column prop="province" label="地区" width="180">
          </el-table-column>
          <el-table-column prop="confirmed" label="新增确诊" align="center">
          </el-table-column>
          <el-table-column prop="suspected" label="新增疑似" align="center">
          </el-table-column>
          <el-table-column prop="dead" label="新增死亡" align="center">
          </el-table-column>
          <el-table-column prop="cure" label="新增治愈" align="center">
          </el-table-column>
          <el-table-column prop="outside" label="境外输入" align="center">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="nowTime">最新进展</div>
    <!-- 最新进展 -->
    <div class="lastedProgress">
      
      <!-- 新闻列表 -->
      <div class="newsList">
        <!-- .native调用原生点击事件 -->
        <el-timeline>
          <el-timeline-item
            v-for="item in newsListData"
            :key="item.id"
            :timestamp="publishTime | fmtDate"
            placement="top"
            @click.native="toNewsDetail(item)"
            >
            <el-card>
              <h4>{{item.title}}</h4>              
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
    <!-- 模态框 -->
    <el-dialog
      title="newsTitle"
      :visible.sync="centerDialogVisible"
      width="60%"
      center
    >
      <!-- <span>需要注意的是内容是默认不居中的</span> -->
      <div v-html="newsContent"></div>
      <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="centerDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 引入axios
import axios from "axios";
// 引入request
import { get } from "@/utils/request";
export default {
  data() {
    return {
      
      // 疫情动态数据数组
      ncovData: [],
      // 国内现存疫情数据
      inLandCovidData: [],
      newsListData: [],
      // 模态框的显示与隐藏
      centerDialogVisible: false,
      newsTitle: '',
      newsContent: '',
      
    };
  },
  // 生命周期钩子函数
  created() {
    // 调用获取疫情动态数据的方法，页面加载时自动执行
    this.getNcovData();
    // 自动执行国内疫情数据的方法
    this.getInLandCovidData();
    // 自动执行
    this.getNewsListData();
  },
  methods: {
    // 获取疫情动态数据
    getNcovData() {
      axios({
        url: "http://api.tianapi.com/ncov/index?key=3e8e8e29357d55fe43dd3858800f8bc2",
      }).then((res) => {
        // 赋值
        this.ncovData = res.data.newslist;
      });
    },
    async getInLandCovidData() {
      // 设置参数
      let params = {
        page: 1,
        pageSize: 5,
      };
      // 发送请求
      let res = await get("/epidemic/pageQuery", params);
      this.inLandCovidData = res.data.list;
    },
    async getNewsListData() {
      // 设置参数
      let params = {
        page: 1,
        pageSize: 10,
      }; 
      // 发送请求
      let res = await get("/article/pageQuery", params);
      // console.log(res);
      // 数据赋值
      this.newsListData = res.data.list;
    },
    cellstyle({row,rowIndex}){
      return 'background:pink'
    },
    // 点击事件：查看新闻详情
    toNewsDetail(item) {
      this.newsTitle = item.title
      this.newsContent = item.content
      this.centerDialogVisible = true
    },
  },
};
</script>

<style scoped>
/* 设置当前时间的样式 */
.nowTime {
  color: #979797;
  margin: 5px;
}
/* 第一部分的样式设置 */
.first {
  /* flex布局（流式布局） */
  display: flex;
  /* 分配富余空间 */
  justify-content: space-between;
}
/* 第一部分里面盒子的样式设置 */
.first .box,
.second .box {
  background-color: rgb(235, 247, 240);
  width: 33%;
  height: 120px;
  border-radius: 10px;
  text-align: center;
}
/* 盒子里数量的样式设置 */
.first .box .num,
.second .box .num {
  /* 设置一个顶部外边距 */
  margin-top: 35px;
  font-weight: bold;
}
/* 盒子里标题的样式设置 */
.first .box .title,
.second .box .title {
  margin-top: 5px;
}
/* 第二部分样式的设置 */
.second {
  display: flex;
  /* 开启换行 */
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 5px;
}
.second .box {
  background-color: rgb(255, 255, 221);
  margin-top: 5px;
}
/* 最新进展的样式 */
.lastedProgress {
  margin-left: -30px;
}
</style>


